<script setup>
import { computed, inject } from 'vue';
import ImgCateg from './img-categ.vue';
import BaseDetails from '@/components/data-label/base-details.vue';
import BaseDataList from '@/components/data-label/base-data-list.vue';
import { xsToOpts } from '@/util';

const OpGte = inject('OpGte');
const imageClasses = inject('imageClasses');
const categories = inject('categories');

const filterOption = (input, opt) => opt.value.includes(input);
const options = computed(() => xsToOpts(imageClasses.value));
</script>

<template>
  <base-details
    class="img-categs"
    :open="0 < categories.length"
  >
    <template #header>
      <span>已分类（{{ categories.length }}）</span>
    </template>

    <template v-if="OpGte('标注')">
      <a-select
        mode="multiple"
        v-model:value="categories"
        show-search
        :options="options"
        :max-tag-count="1"
        :max-tag-text-length="6"
        :dropdown-match-select-width="false"
        :filter-option="filterOption"
        placeholder="选择图片分类"
        style="width: 100%;">
        <template #suffixIcon></template>
      </a-select>
    </template>

    <base-data-list :list="categories">
      <template #default="{ item }">
        <img-categ :item="item"></img-categ>
      </template>
    </base-data-list>
  </base-details>
</template>

<style>
.img-categs {
  align-items: baseline;
  height: auto;
  min-height: 40px;
  line-height: 40px;
}

.img-categs .base-data-list-container { --shrink: 74px; }
.img-categs .img-categ { display: list-item; }
</style>
